<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes,
  getCurrentInstance
} from 'vue'
import { ElOption, ElLink } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject
} from './utils'
export const oLinkSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  underline: {
    type: Boolean,
    default: true
  },
  ...IgnoreProps
}
export const oLinkProps = {
  ...ElLink.props,
  ...oLinkSelfProps
}
export type oLinkPropsType = ExtractPropTypes<typeof oLinkProps>
const oLink = defineComponent({
  name: 'one-link',
  props: oLinkProps,
  inheritAttrs: false,
  components: { ElLink },
  setup(props: oLinkPropsType, context) {
    const inProps = omitSelfProps<oLinkPropsType, typeof oLinkSelfProps>(
      props,
      oLinkSelfProps
    )
    // const ins = getCurrentInstance() // {ctx} this对象
    // console.log(ins)
    return () => (
      <ElLink
        {...inProps}
        class={{ [oLink.name]: true, underline: props.underline }}
        v-slots={context.slots}
        onClick={() => {
          context.emit('click', props.formData)
        }}
      >
        {props.value || props.formData![props.prop!]}
      </ElLink>
    )
  }
})
export default oLink
</script>
<style lang="scss" scoped>
a:hover {
  background-color: #0000;
}
.el-link.underline.is-underline:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  border-bottom: 1px solid var(--el-link-hover-text-color);
}
</style>
